<template>
	<div class="main">
<MyHeader title="tabbar案例嘻嘻"></MyHeader>
<component :is="comName"></component>
<MyTabBar :arr='tabList' @change='changeFn'></MyTabBar>
	</div>
</template>

<script>

import "bootstrap/dist/css/bootstrap.css"
import "./assets/fonts/iconfont.css"

 import MyHeader from './components/MyHeader.vue'
   import MyTabBar from './components/MyTabBar.vue'

   import MyGoodsList from './views/MyGoodsList.vue'
   import MyGoodsSearch from './views/MyGoodsSearch.vue'
   import MyUserInfo from './views/MyUserInfo.vue'
	export default {
		data() {
			return {
        
        comName:'MyGoodsList',
				tabList: [ // 底部导航的数据
					{
						iconText: "icon-shangpinliebiao",
						text: "商品列表",
						componentName: "MyGoodsList",
					},
					{
						iconText: "icon-sousuo",
						text: "商品搜索",
						componentName: "MyGoodsSearch",
					},
					{
						iconText: "icon-user",
						text: "我的信息",
						componentName: "MyUserInfo",
					},
				],
			};
		},
     components:{
      MyHeader,
      MyTabBar,
      MyGoodsList,
      MyGoodsSearch,
      MyUserInfo
    },
    methods:{
         changeFn(comName){
        this.comName=comName
      }
    }
	};
</script>

<style scoped>
	.main {
		padding-top: 45px;
		padding-bottom: 51px;
	}
</style>
